<template>
    <div class="chart-container">
        <chart id="QianxiMapEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
require('echarts/map/js/china.js');  // 引入中国地图组件
import {getNewEcharts} from '@/api/api'
import echart from '@/mixins/echart'
var geoCoordMap = {
    '安徽省': [117.17, 31.52],
    '北京市': [116.24, 39.55],
    '重庆市': [106.54, 29.59],
    '福建省': [119.18, 26.05],
    '甘肃省': [103.51, 36.04],
    '广东省': [113.14, 23.08],
    '广西壮族自治区': [108.19, 22.48],
    '贵州省': [106.42, 26.35],
    '海南省': [110.20, 20.02],
    '河北省': [114.30, 38.02],
    '河南省': [113.40, 34.46],
    '黑龙江省': [128.36, 45.44],
    '湖北省': [112.27, 30.15],
    '湖南省': [112.59, 28.12],
    '吉林省': [125.19, 43.54],
    '江苏省': [118.46, 32.03],
    '江西省': [115.55, 28.40],
    '辽宁省': [123.25, 41.48],
    '内蒙古': [108.41, 40.48],
    '宁夏回族自治区': [106.16, 38.27],
    '青海省': [101.48, 36.38],
    '山东省': [118.00, 36.40],
    '山西省': [112.33, 37.54],
    '陕西省': [108.57, 34.17],
    '上海市': [121.29, 31.14],
    '海南': [108.77, 19.10],
    '四川省': [104.04, 30.40],
    '天津市': [117.12, 39.02],
    '西藏自治区': [91.08, 29.39],
    '新疆维吾尔自治区': [87.36, 43.45],
    '云南省': [102.42, 25.04],
    '浙江省': [120.10, 30.16],
    '澳门': [115.07, 21.33],
    '台湾省': [121.21, 23.53]
};
var SHData = [
    [{
        name: '上海市'
    }, {
        name: '北京市',
        value: 195
    }],
    [{
        name: '上海市'
    }, {
        name: '广东省',
        value: 90
    }],
    [{
        name: '上海市'
    }, {
        name: '辽宁省',
        value: 80
    }],
    [{
        name: '上海市'
    }, {
        name: '湖北省',
        value: 70
    }],
    [{
        name: '上海市'
    }, {
        name: '内蒙古',
        value: 70
    }],
    [{
        name: '上海市'
    }, {
        name: '江苏省',
        value: 60
    }],
    [{
        name: '上海市'
    }, {
        name: '新疆维吾尔自治区',
        value: 70
    }],
    [{
        name: '上海市'
    }, {
        name: '四川省',
        value: 40
    }],
    [{
        name: '上海市'
    }, {
        name: '云南省',
        value: 130
    }],
    [{
        name: '上海市'
    }, {
        name: '黑龙江省',
        value: 130
    }],
    [{
        name: '上海市'
    }, {
        name: '甘肃省',
        value: 200
    }],
    [{
        name: '上海市'
    }, {
        name: '西藏自治区',
        value: 60
    }]
];
var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};
var shangHaiData = [];
SHData.map(function(dataItem){
    shangHaiData.push({
        name: dataItem[1].name,
        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    })
})
export default {
    name: 'QianxiMapEchart',
    mixins: [echart],
    created(){
        this.data.options.series[0].data = convertData(SHData)
        this.data.options.series[1].data = convertData(SHData)
        this.data.options.series[2].data = shangHaiData
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"pictorialBar",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.seriesData
                    this.data.options.legend.data = res.data.legendData
                    
                }
            })
        }
    }
}
</script>
